const path = require('path');

const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',
    filename: './index.html'
})

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
//在开发调试阶段这么设置    
// devtool:'source-map',    
//在实际发布时建议这样设置或直接关闭sourcemap
devtool:'eval-source-map',
mode:'development',
entry:path.join(__dirname,'./src/index1.js'),
output:{
    //存放的目录
    path:path.join(__dirname,'./dist'),
    //生成的文件名
    filename:'js/bundle.js'
},
plugins: [htmlPlugin,new CleanWebpackPlugin()],
devServer: {
    open: true,//初次打包完成后,自动打开浏览器
    host: '127.0.0.1',// 实时打包所使用的主机地址
    port: 8080,// 实时打包所使用的端口号
    static:'./' //静态资源，能够在http协议上打开相当于是app.use(express.static('./'))
},
module: {
    rules:[
        //定义了不同模块对应的loader
        {test:/\.css$/,use:['style-loader','css-loader']},
        //处理.less文件的loader
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
        //处理图片文件
        {test:/\.jpg|png|gif$/,use:'url-loader?limit=470&outputPath=images'},
        //使用Babel-loader处理高级的js语法，exclude用来排除第三方包的js文件，他们的兼容性不管
        {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
    ]
},
resolve:{
    alias:{
        '@':path.join(__dirname,'./src/')
    }
}
}